import React, { Component } from 'react'
import { Link } from 'react-router-dom'

// 404页面，在3秒后，自动跳转到首页去，此时就需要js来完成
// 通过js来完成的导航切换，编程式导航
// 编程式导航通过this.props.history对象来完成的，此对象有一个要求
// 只有当前组件是路由直接匹配成功后渲染的组件才有此对象

class NotFound extends Component {
  // 挂载完成后，弄一个定时器，3秒后到首页
  componentDidMount() {
    // 用一个成员属性来保存当前的计数器
    this.timer = setTimeout(() => {
      this.props.history.push('/')
    }, 3000)
  }

  // 销毁进行清理工作
  componentWillUnmount() {
    console.log('走了')
    this.timer && clearTimeout(this.timer)
  }

  render() {
    // 通过this.props得到当前组件中的路由对象
    // console.log(this.props)
    // 其中this.props.history方法就是编程式导航所用到的对象
    // this.props.history(string|{pathname:string,search:string,state:object})
    return (
      <div>
        <h3>页面丢失</h3>
        <br />
        <Link to="/">去首页</Link>
        <br />
        <button
          onClick={() => {
            this.props.history.push('/')
          }}
        >
          去首页
        </button>
      </div>
    )
  }
}

export default NotFound
